
<template>
    <!-- 基本信息管理/顾客管理 -->
    <div class="customerMng">
        <div class="top_operation">
            
            <div class="every_operation" v-if="isRegionShow">
                <span><b style="color:red;">*</b> 大区：</span>
                <a-select
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="regionChange" 
                    v-model="regionId" 
                >
                    <a-select-option :key="index" v-for="(item, index) in regionList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isCityShow">
                <span><b style="color:red;">*</b> 城市：</span>
                <a-select 
                    show-search
                    :filter-option="filterOption"
                    style="width: 195px" 
                    @change="cityChange" 
                    v-model="cityId"
                >
                    <a-select-option :key="index" v-for="(item, index) in cityList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>
            <div class="every_operation" v-if="isWareShow">
                <span><b style="color:red;">*</b> 仓库：</span>
                <a-select
                    show-search
                    :filter-option="filterOption" 
                    style="width: 195px" 
                    @change="warehouseChange" 
                    v-model="organizeId"
                >
                    <a-select-option :key="index" v-for="(item, index) in warehouseList" :value="item.id">
                        {{item.name}}
                    </a-select-option>
                </a-select>
            </div>

            <div class="every_operation">
                <span>客户：</span>
                <a-select style="width: 195px"
                    show-search
                    :filter-option="filterOption"
                    @change="customerChange" 
                    v-model="customerCode" 
                    allowClear
                >
                    <a-select-option :key="index" v-for="(item, index) in customerList" :value="item.customerCode">
                        {{item.customerName}}
                    </a-select-option>
                </a-select>
            </div>

            <div class="button_div">
                <a-button type="primary" icon="search" @click="onSearch()">搜索</a-button>
                <a-button type="primary" icon="sync" style="margin-left:20px;" @click="onReset()">重置</a-button>
            </div>
        </div>
        <!-- <div class="select_number">
            <span class="number_span">已选择<b>{{selectNumber}}</b>项</span>
            <span class="clear_span" @click="clearSelect">清空</span>
        </div> -->
        <!-- 修改右滑抽屉 -->
            <a-drawer
                title="修改所属公司"
                placement="right"
                :closable="true"
                :visible="visible"
                @close="onClose"
                width="800"
            >
            <a-form-model ref="ruleForm" labelAlign="right" layout="inline" :model="form" :rules="rules">
                 <a-form-model-item label="所属公司:" >
                    <a-input
                        v-model.trim="form.company"
                        style="width: 300px;margin-right:10px;margin-bottom:15px"
                        placeholder="请输入所属公司"
                        :maxLength="50"
                    />
                </a-form-model-item>
                <a-form-model-item label="项目备注:" layout="vertical">
                    <a-textarea v-model="form.remark" placeholder="请输入" :rows="3" style="width:600px" :maxLength="1024" />
                </a-form-model-item>
            </a-form-model>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 11 }" style="margin-top:45px">
                    <a-button type="primary" @click="onSubmit">
                        保存
                    </a-button>
                 </a-form-model-item>
            </a-drawer>
        <div class="data_source_list">
            <div class="data_source_details">
                <a-table
                    :loading="tableLoading"
                    :columns="columns" 
                    :data-source="data"
                    :pagination="false"
                    bordered
                    rowKey="id"
                    >
                    <!-- 未用到 -->
                    <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"  -->
                    <span slot="whCode" href="javascript:;" slot-scope="text, record">
                        <span>{{getWHName(record)}}</span>
                    </span>
                    <a slot="action" slot-scope="text, record" href="javascript:;">
                        <a-button type="primary" @click="editDrawer(record)">
                            修改
                        </a-button>
                    </a>
                </a-table>
                <!-- 底部分页组件 -->
                <BottomPagination
                    :total="total"
                    @pageChange="pageChange"
                    @sizeChange="sizeChange"
                ></BottomPagination>
            </div>
            
        </div>
    </div>
</template>

<script>
    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            align: 'center',
            ellipsis: true,
            width: 80,
            customRender:(taxe,records,index)=>`${index + 1}`
        },
        {
            title: '客户名称',
            dataIndex: 'customerName',
            key: 'customerName',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '客户编码',
            dataIndex: 'customerCode',
            key: 'customerCode',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '仓库',
            dataIndex: 'whCode',
            key: 'whCode',
            align: 'center',
            ellipsis: true,
            scopedSlots: { 
                customRender: 'whCode' 
            },
        },
        {
            title: '联系人',
            dataIndex: 'contactName',
            key: 'contactName',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '联系电话',
            dataIndex: 'contactTel',
            key: 'contactTel',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '邮箱',
            dataIndex: 'contactEmail',
            key: 'contactEmail',
            align: 'center',
            ellipsis: true,
        },
        {
            title: '详细地址',
            dataIndex: 'contactAddress',
            key: 'contactAddress',
            align: 'center',
            ellipsis: true,
        },
         {
            title: '所属公司',
            dataIndex: 'company',
            key: 'company',
            align: 'center',
            ellipsis: true,
            width: 100,
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            align: 'center',
            ellipsis: true,
        },
        { 
            title: '操作', 
            dataIndex: 'action', 
            key: 'action', 
            scopedSlots: { 
                customRender: 'action' 
            },
            align: 'center',
            width: '200px',
            fixed: 'right',
        },
    ];

    import TopSelect from '../meter/TopSelect'
    import BottomPagination from '../meter/BottomPagination'
    import { getHeadquarters, getRegion, getCity, getWarehouse, getCustomerList, getCustomerName, putCustomerModify} from '@/api/api'
    export default {
        name: 'CustomerMng',
        components: {
            TopSelect,
            BottomPagination
        },
        data () {
            return {
                headquartersId: '', // 总部id
                regionId: '', // 大区id
                cityId: '', // 城市id
                organizeId: '', // 仓库id
                code: '', // 仓库编码
                serialNumber:'',
                regionList: [],
                cityList: [],
                warehouseList: [],
                customerCode: '',
                customerList: [],
                isRegionShow: true,
                isCityShow: true,
                isWareShow: true,
                visible: false,
                data: [],
                columns,
                tableLoading: false,
                selectNumber: 0, // 当前选中数据条数
                selectedRowKeys: [], // 当前选择集合
                deletdBtnShow: false, // 批量删除按钮是否显示
                pageNo: 1,
                pageSize: 10,
                total: 0,
                form:{
                    customerName:'',
                    company:'',
                    remark:'',
                    id:''
                },
                rules: {
                    region: [
                        { required: true, message: '请选择大区', trigger: 'change', },
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change', },
                    ]
                },
            }
        },
        created() {
            this.getHeadquartersList()
        },
        methods: {
            // 选择器
            handleChange(value) {
                console.log(`selected ${value}`);
            },
            // 选择框过滤
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            // 搜索
            onSearch() {
                if( this.regionId === '' || this.cityId === '' || this.organizeId === '' ){
                    this.$message.warning('搜索时必须先选择大区、城市和仓库！')
                }else{
                    this.getCustomerList()
                }
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 重置
            onReset() {
                this.regionId = ''
                this.cityId = ''
                this.organizeId = ''
                this.cityList = []
                this.warehouseList = []
                this.customerCode = ''
                this.customerList = []
                this.pageSize = 10
                this.pageNo = 1
                this.total = 0
                this.data = []
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 选中
            onSelectChange(selectedRowKeys) {
                this.selectedRowKeys = selectedRowKeys
                this.selectNumber = selectedRowKeys.length
                if(this.selectedRowKeys.length > 0){
                    this.deletdBtnShow = true
                }else{
                    this.deletdBtnShow = false
                }
            },
            // 清空选中
            clearSelect() {
                this.selectNumber = 0
                this.selectedRowKeys = []
                this.deletdBtnShow = false
            },
            // 获取总部
            getHeadquartersList(){
                let params = {}
                getHeadquarters(params).then((res)=>{
                    if(res.success){
                        this.headquartersId = res.result.organizeOrgList[0].id
                        this.getRegionList()
                    }
                })
            },
            // 获取大区
            getRegionList(){
                let params = {id: this.headquartersId}
                getRegion(params).then((res)=>{
                    if(res.success){
                        this.regionList = res.result.organizeOrgList
                        if(this.regionList.length === 1){
                            this.regionId = this.regionList[0].id
                            this.getCityList()
                        }
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 选择大区
            regionChange(value){
                this.regionId = value 
                this.cityId = ''
                this.organizeId = ''
                this.cityList = []
                this.warehouseList = []
                this.getCityList()
                this.customerCode = ''
                this.customerList = []
            },
            // 获取城市
            getCityList(){
                let params = {
                    areaIds: this.regionId
                }
                getCity(params).then((res)=>{
                    if(res.success){
                        this.cityList = res.result.organizeOrgList
                        if(this.cityList.length === 1){
                            this.cityId = this.cityList[0].id
                            this.getWarehouseList()
                        }
                    }
                })
            },
            // 选择城市
            cityChange(value){
                this.cityId = value
                this.organizeId = ''
                this.warehouseList = []
                this.getWarehouseList()
                this.customerCode = ''
                this.customerList = []
            },
            // 获取仓库
            getWarehouseList(){
                let params = {
                    cityIds: this.cityId
                }
                getWarehouse(params).then((res)=>{
                    if(res.success){
                        this.warehouseList = res.result.organizeOrgList
                        if(this.warehouseList.length === 1){
                            this.organizeId = this.warehouseList[0].id
                            this.code = this.warehouseList[0].code
                            // this.onSearch()
                            this.getCustomerName()
                        }
                    }
                })
            },
            // 选择仓库
            warehouseChange(value){
                this.organizeId = value
                for(var item of this.warehouseList) {
                    if(item.id === this.organizeId) {
                        this.code = item.code
                        this.getCustomerName()
                        this.customerCode = ''
                        this.customerList = []
                    }
                }
            },
            // 获取客户名称列表
            getCustomerName() {
                let params = {
                    whCode: this.code,
                }
                getCustomerName(params).then((res)=>{
                    if(res.success){
                        this.customerList = res.result    
                        // console.log(res.result);                  
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 选择客户
            customerChange() {
                this.ownerCode = ''
                this.platformCode = ''
                if(this.customerCode){
                    // this.getOwnerName()
                    // this.getplatformName()
                }
            },
            // 获取当前页数、条数
            pageChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getCustomerList()
            },
            // 获取当前页数、条数
            sizeChange(data1, data2) {
                this.pageNo = data1
                this.pageSize = data2
                this.getCustomerList()
            },
            // 获取客户列表
            getCustomerList(){
                let params = {
                    whCode: this.code,
                    customerCode: this.customerCode,
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    remark:this.remark
                }
                this.tableLoading = true
                getCustomerList(params).then((res)=>{
                    this.tableLoading = false
                    if(res.success){
                        this.data = res.result.records
                        this.total = res.result.total
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 通过仓库编码查询仓库名称
            getWHName(record) {
                for(var item of this.warehouseList){
                    if(item.code == record.whCode){
                        return item.name
                    }
                }
            },
            showDrawer() {
                this.visible = true;
            },
            onClose() {
                this.visible = false; 
            },
            // 修改所属公司
            editDrawer(record) {
                this.visible = true;
                this.form.customerName=record.customerName
                this.form.remark=record.remark
                this.form.company=record.company
                this.drawerTitle="修改所属公司"
                this.visible = true;
                this.drawerTitle = '修改收支项'
                this.addMode =false
                this.form.region = record.region
                this.form.city = record.city
                this.form.name = record.name
                this.form.financeType = record.financeType
                this.form.financeName = record.financeName
                this.id = record.id
            },
            customerName(){
            },
            // 修改用户请求
            onSubmit() {
                let params = {
                    id: this.id,
                    customerName:this.form.customerName,
                    company:this.form.company,
                    remark:this.form.remark
                }
                putCustomerModify(params).then((res)=>{
                    if(res.success){
                        this.visible = false
                        this.getCustomerList()
                    }else{
                        this.$message.warning(res.message)
                    }
                })
                    return false;
            }
        }
    }
</script>

<style lang="less" scoped>
    .customerMng {
        width: 100%;
        padding: 0 10px 10px 10px;
        font-style: Microsoft YaHei;
        background: #ffffff;
        box-sizing: border-box;
        .top_operation{
            margin-bottom: 10px;
            overflow: hidden;
            .every_operation{
                float: left;
                margin-top: 10px;
                margin-right: 20px;
                span{
                    display: inline-block;
                    width: 85px;
                }
            }
            .button_div{
                float: left;
                margin-top: 10px;
            }
        }
        .select_number{
            width: 100%;
            height: 36px;
            padding-left: 20px;
            margin-bottom: 10px;
            box-sizing: border-box;
            background: rgba(57, 72, 103, .22);
            line-height: 36px;
            .number_span{
                color: #ffffff;
                margin-right: 30px;
                b{
                    color: #394867;
                    margin: 0 15px;
                }
            }
            .clear_span{
                cursor: pointer;
                color: #394867;
            }
        }
        .add_btn{
            margin-bottom: 10px;
        }
        .data_source_list{
            h3{
                font-weight: bold;
            }
            .data_pagination{
                width: 100%;
                height: 32px;
                margin: 20px 0 10px 0;
            }      
        }
    }
</style>
